<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>底部导航栏 - 背景色</title>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/mdui@1.0.1/dist/css/mdui.min.css" />
</head>

<body class="mdui-bottom-nav-fixed">

    <div class="mdui-bottom-nav mdui-bottom-nav-text-auto mdui-color-indigo">
        <a href="javascript:void(0);" class="mdui-ripple mdui-ripple-white mdui-bottom-nav-active">
            <i class="mdui-icon material-icons">live_tv</i>
            <label>Movies</label>
        </a>
        <a href="javascript:void(0);" class="mdui-ripple mdui-ripple-white">
            <i class="mdui-icon material-icons">music_note</i>
            <label>Music</label>
        </a>
        <a href="javascript:void(0);" class="mdui-ripple mdui-ripple-white">
            <i class="mdui-icon material-icons">book</i>
            <label>Books</label>
        </a>
        <a href="javascript:void(0);" class="mdui-ripple mdui-ripple-white">
            <i class="mdui-icon material-icons">library_books</i>
            <label>Newsstand</label>
        </a>
    </div>

    <div class="mdui-container">

        <div class="mdui-tab mdui-tab-centered" mdui-tab>
            <a href="#example5-tab1" class="mdui-ripple">
                <i class="mdui-icon material-icons">phone</i>
            </a>
            <a href="#example5-tab2" class="mdui-ripple">
                <i class="mdui-icon material-icons">favorite</i>
            </a>
            <a href="#example5-tab3" class="mdui-ripple">
                <i class="mdui-icon material-icons">perm_contact_calendar</i>
            </a>
        </div>

        <div class="mdui-panel mdui-panel-popout" mdui-panel>

            <div class="mdui-panel-item">
                <div class="mdui-panel-item-header">First</div>
                <div class="mdui-panel-item-body">
                    <p>First content</p>
                    <p>First content</p>
                    <p>First content</p>
                    <p>First content</p>
                    <p>First content</p>
                    <p>First content</p>
                </div>
            </div>

            <div class="mdui-panel-item">
                <div class="mdui-panel-item-header">Second</div>
                <div class="mdui-panel-item-body">
                    <p>Second content</p>
                    <p>Second content</p>
                    <p>Second content</p>
                    <p>Second content</p>
                    <p>Second content</p>
                    <p>Second content</p>
                </div>
            </div>

            <div class="mdui-panel-item">
                <div class="mdui-panel-item-header">Third</div>
                <div class="mdui-panel-item-body">
                    <p>Third content</p>
                    <p>Third content</p>
                    <p>Third content</p>
                    <p>Third content</p>
                    <p>Third content</p>
                    <p>Third content</p>
                </div>
            </div>

            <div class="mdui-divider"></div>

            <div class="mdui-divider-inset"></div>

            <div class="mdui-panel-item">
                <div class="mdui-panel-item-header">Third</div>
                <div class="mdui-panel-item-body">
                    <p>Third content</p>
                    <p>Third content</p>
                    <p>Third content</p>
                    <p>Third content</p>
                    <p>Third content</p>
                    <p>Third content</p>
                </div>
            </div>

            <div class="mdui-panel-item">
                <div class="mdui-panel-item-header">Third</div>
                <div class="mdui-panel-item-body">
                    <p>Third content</p>
                    <p>Third content</p>
                    <p>Third content</p>
                    <p>Third content</p>
                    <p>Third content</p>
                    <p>Third content</p>
                </div>
            </div>

            <div class="mdui-panel-item">
                <div class="mdui-panel-item-header">Third</div>
                <div class="mdui-panel-item-body">
                    <p>Third content</p>
                    <p>Third content</p>
                    <p>Third content</p>
                    <p>Third content</p>
                    <p>Third content</p>
                    <p>Third content</p>
                </div>
            </div>

        </div>
    </div>

    <script src="//cdn.jsdelivr.net/npm/mdui@1.0.1/dist/js/mdui.min.js"></script>
</body>

</html>